<script setup>
import myTextarea from './myTextarea.vue';
import { ref } from 'vue';

const queryParams = ref({
    img: '', // 图片
    text: '', // 文字
    num: 1 // 生成张数
})

// 上传图片
function uplaodImgFn() {
    uni.chooseMedia({
        count: 1,
        mediaType: 'image',
        success(e) {
            queryParams.value.img = e.tempFiles[0].tempFilePath
        }
    })
}


// 图片数量选择
function imgNumClick(item) {
    queryParams.value.num = item
}

const textareaStyle = {
    height: '166rpx'
}
</script>

<template>
    <div class='aiSelect'>
        <div class="title_box">上传图片</div>
        <div class="uploadImg" @click="uplaodImgFn">
            <img v-if="queryParams.img" :src="queryParams.img" mode="aspectFit" class="imgSty" alt="">
            <div class="upload_btn" v-else>
                <i class="iconfont ai-icon-shangchuancankaotu"></i>
                <div class="text">相册选择</div>
            </div>
        </div>


        <div class="textarea_box">
            <myTextarea v-model="queryParams.text" label="输入修改描述词" placeholder="客厅有灰色沙发，灯具，抽象画作,以白色客厅墙为背景"
                :textareaStyle="textareaStyle" :overlayStyle="{ background: 'transparent' }">
            </myTextarea>
        </div>

        <div class="title_box">参数设置</div>
        <div class="imgNum">
            <div class="imgNum_item" :class="{ active: item === queryParams.num }" v-for="item of 4"
                @click="imgNumClick(item)">
                <div class="text">{{ item }}</div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.aiSelect {
    .uploadImg {
        height: 880rpx;
        background: #444072;
        border-radius: 20rpx;
        margin-top: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .imgSty {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
        }

        .upload_btn {
            width: 228rpx;
            height: 84rpx;
            border-radius: 45rpx;
            border: 3rpx solid #83CD88;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10rpx;

            .iconfont {
                font-size: 32rpx;
                color: #FFFFFF;
            }

            .text {
                font-size: 32rpx;
                color: #FFFFFF;
            }
        }
    }

    .textarea_box {
        margin-top: 31rpx;
    }

    .title_box {
        font-size: 28rpx;
        color: #FFFFFF;
        font-weight: bold;
        position: relative;
        padding-left: 30rpx;
        margin-top: 40rpx;
        margin-bottom: 18rpx;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            width: 12rpx;
            height: 18rpx;
            background: #83CD88;
            border-radius: 6rpx;
        }
    }

    .imgNum {
        display: flex;
        align-items: center;
        gap: 18rpx;

        .imgNum_item {
            box-sizing: border-box;
            width: 84rpx;
            height: 84rpx;
            border-radius: 12rpx;
            color: #FFF;
            background: #444072;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8rpx;
            margin-top: 8rpx;

            &.active {
                border: 3rpx solid #83CD88;
                color: #83CD88;
            }

            .iconfont {
                font-size: 42rpx;
            }

            .text {
                font-size: 26rpx;
            }
        }
    }
}
</style>